<meta charset="utf-8">
<style>
    *{
        font-size: 12px;
    }
    table,td{
        border: 0.2px solid #ccc;
    }
    td{
        border-right:none;
        border-top:none;        
    }
    select,input{
        width:180px;
        height:24px;
    }
    .t{
        text-align: center;
        background: #e0e0e0;
        color: #cc0000;
        font-weight: bold;
        padding: 1px; 
         height: 30px;
         line-height: 30px;
         font-size: 14px;
    }
    .title{
        width:764px;
        border: 0.2px solid #ccc; 
        padding:2px 2px 20px; 
        border-bottom: none;
    }
    .btn{
        width:768px;
        border: 0.2px solid #ccc; 
        padding:10px 10px 10px 640px; 
        box-sizing: border-box;
        border-bottom: none;
        border-top: none;
    }
    .box{
        width:770px;
        margin: 50px auto;
    }
</style>

<div class="box">
    <div class="title">
        <div class="t">个 人 存 款 计 算 器</div>
    </div>
    <table border="1px" cellpadding="6" cellspacing="0">
        <tr>
            <td width="160" align="right">存款类型</td>
            <td colspan="3">
                <select>
                    <option>==请选择==</option>
                    <option selected>整存整取</option>
                    <option>零存本取</option>
                    <option>存本取息</option>
                    <option>教育储蓄</option>
                    <option>通知存款</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align="right">币种</td>
            <td width="200">
                <select>
                    <option>人民币</option>
                    <option>美元</option>
                    <option>港币</option>
                    <option>欧元</option>
                    <option>日元</option>
                    <option>英镑</option>
                </select>
            </td>
            <td width="160" align="right">初始存款金额</td>
            <td width="200"><input id="d1"/></td>      
        </tr>

        <tr>
            <td align="right">存款期限</td>
            <td>
                <select>
                    <option>三个月</option>
                    <option>六个月</option>
                    <option>一年</option>
                    <option>两年</option>
                    <option>三年</option>
                    <option selected>五年</option>
                </select>
            </td>
            <td align="right">年利率</td>
            <td><input value="2.75" id="num"/> %</td>      
        </tr>

        <tr>
            <td align="right">初始存入日期</td>
            <td style="background:rgb(255, 248, 231);">
                
            </td>
            <td align="right">月存入金额</td>
            <td style="background:rgb(255, 248, 231);"></td>      
        </tr>
        <tr>
            <td align="right">支取频次</td>
            <td style="background:rgb(255, 248, 231);">          
            </td>
            <td align="right">提取日期</td>
            <td style="background:rgb(255, 248, 231);"></td>      
        </tr>
    </table>

    <div class="btn">
        <input type="button" value="提交试算" id="d2" style="width:100px;"/>
    </div>

    <table border="1px" cellpadding="6" cellspacing="0">
        <tr>
            <td width="160" align="right">所得利息金额</td>
            <td colspan="3" width="584">
            <input id="d3"/>
            </td>
        </tr>
        <tr>
            <td align="right">利息税金额</td>
            <td colspan="3">
                <input id="d5"/>
            </td>
        </tr>
        <tr>
            <td align="right">本息合计（税后）</td>
            <td colspan="3">
                <input  id="d4"/>
            </td>
        </tr>
    </table>
</div>
<script>
    d2.onclick = function(){
       if(isNaN(d1.value)){
           alert("请输入正确的初始存款金额");
           return;
       }
       d3.value = d1.value* num.value/100*5;
       d4.value = parseFloat(d3.value) + parseFloat(d1.value);
       d5.value = 0;
    }
</script>
